<template>
  <j-modal
    title="打印"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    @ok="handleOk"
    :footer="null"
    @update:fullscreen="isFullscreen"
    wrapClassName="j-depart-select-modal"
    :switchFullscreen="true"
    cancelText="关闭"
    okText="打印">
    <a-spin :spinning="confirmLoading">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" >
          <a-row :gutter="24">
            <a-col :xl="8" :lg="8" :md="8" :sm="24">
              <a-form-item label="名称">
                <JUserSelect :value="model.name" @change="userChange"></JUserSelect>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
<!--                  <a-button ghost type="primary">操作说明</a-button>&nbsp;-->
                  <a-button v-print="'#printHtml'" ghost type="primary">打印</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-divider orientation="left">打印预览 </a-divider>
      <div ref="printHtml" id="printHtml">
        <div v-if="showHtml" v-html="htmlStr"></div>
      </div>

      <vca-select-resident-modal ref="selectResident"></vca-select-resident-modal>
      <vca-select-pension-supply-modal ref="selectPensionSupply"></vca-select-pension-supply-modal>
      <vca-death-reason-modal ref="deathReason"></vca-death-reason-modal>
      <vca-build-apply-modal ref="buildApply"/>
    </a-spin>
  </j-modal>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import JUserSelect from '@comp/jeecg/JUserSelect'
  import VcaSelectResidentModal from '@views/jeecg/modules/template/VcaSelectResidentModal'
  import VcaSelectPensionSupplyModal from '@views/jeecg/modules/template/VcaSelectPensionSupplyModal'
  import VcaDeathReasonModal from '@views/jeecg/modules/template/VcaDeathReasonModal'
  import VcaBuildApplyModal from "@views/villageCadreAssist/modules/VcaBuildApplyModal";

  export default {
    name: 'VcaPrintModal',
    components: {
      VcaBuildApplyModal,
      VcaDeathReasonModal,
      VcaSelectPensionSupplyModal,
      VcaSelectResidentModal,
      JUserSelect
    },
    props: {
      modalWidth:{
        type:Number,
        default:1000,
        required:false
      }
    },

    data () {
      return {
        htmlStr:"",
        loading:true,
        visible:false,
        confirmLoading:false,
        fullscreen:true,
        showHtml:false,
        model:{},
        labelCol: {
          xs: { span: 12 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 12 },
          sm: { span: 16 },
        },
        url:{
          getHtmlData:"/villageCadreAssist/vcaFileTemplate/getHtmlData",
          getHtml:"/villageCadreAssist/vcaFileTemplate/getHtml",
          queryFileItemList:"/villageCadreAssist/vcaFileTemplate/queryVcaFileItemList",
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    methods: {
      userChange(val){
        if(val){
          getAction(this.url.getHtmlData, { residentId:val }).then((res)=> {
            if(res.success){
              if(res.result) {
                this.model.htmlData = res.result;
                fullData(res.result)//调用html模板中的方法
                this.doOther(res.result);
              };//调用模板中的js，填充模板html中的数据
            }else{
              this.$message.warning(res.message);
            }
          });
        }
      },
      doOther(param){
        param["code"]=this.model["code"];
        if(this.model["code"]=="cancel_pension"){
          this.$refs.selectResident.title = "选择收益者或继承人";
          this.$refs.selectResident.init(param);
        }else if(this.model["code"]=="separate_host"){
          this.$refs.selectResident.title = "选择需要分出的家庭人员";
          this.$refs.selectResident.init(param);
        }else if(this.model["code"]=="pension_supply"){
          this.$refs.selectPensionSupply.title = "选择年度";
          this.$refs.selectPensionSupply.init(param);
        }else if(this.model["code"]=="death_prove"){
          this.$refs.deathReason.title = "死亡原因";
          this.$refs.deathReason.init(param);
        }else if(this.model["code"]=="build_apply"){
          this.$refs.buildApply.title = "建房申请";
          this.$refs.buildApply.init(param);
        }
      },
      async init(record) {
        this.confirmLoading = true;
        this.model = Object.assign({},record);
        await getAction(this.url.queryFileItemList,{id:record["id"],code:record["code"]}).then((res)=>{
          if(res.success){
            this.loadHtml(res.result[0]["fileUrl"]);//暂时只支持单文件
          }else{
            this.$message.warning(res.message);
          }
        }).finally(()=>{this.confirmLoading = false;})
        this.visible = true;
      },
      async loadHtml(url){
        const that = this;
        await getAction(this.url.getHtml, { url:url }).then((res)=> {
          that.htmlStr = res;
          that.$nextTick(() => {//让res返回的html中的js生效
            // 截取script标签里的内容
            let scriptData = [];
            let reg = /<script>([\s\S]+?)<\/script>/g;
            scriptData = that.htmlStr.match(reg);
            for(let i = 0; i<scriptData.length; i++) {
              let dataEle = document.createElement("script");
              dataEle.innerHTML = scriptData[i].slice(8, scriptData[i].length-9)
              that.$refs.printHtml.append(dataEle)
            }
          });
          that.showHtml=true;
        });
      },
      handleOk(){

      },
      handleCancel(){
        this.visible=false;
        this.showHtml=false;
      },
      isFullscreen(val){
        this.fullscreen=true;
      }
    }
  }
</script>